<template>
    <div class="layout">
        <div class="header">
            <Header></Header>
        </div>
        <div class="main-body">

            <div class="sider">
                <Sider></Sider>
            </div>

            <div class="main">
                <keep-alive>
                    <router-view/>
                </keep-alive>
            </div>
        </div>

    </div>
</template>
<script>
    import Header from "@/components/common/Header"
    import Sider from "@/components/common/Sider/index"


    export default {
        components: {
            Header,
            Sider,
        }

    }
</script>
<style scoped lang="scss">
    $height: 148px;
    $main_padding_left: 1000px;

    .layout {
        width: 100%;
        height: 100%;
        .header {
            height: $height;
        }

        .main-body {
            position: relative;
            height: 1344px - $height;

            .sider {
                width: $main_padding_left;
                height: 1344px;
                position: absolute;
                top: -$height;
                left: 0;
                // border-right: 1px solid #ccc;
            }
            .main {
                padding-left: $main_padding_left;
                height: 100%;

                // background: red;
                // background-clip: content-box;
            }
        }
    }
</style>
